<template>
  <div class="tubiao">
    <div class="title">湖北省扶贫工作整体简介</div>
    <el-card>
      <div id="main" style="width: 800px;height:400px;"></div>
    </el-card>
    <el-card>
      <div id="main1" style="width: 800px;height:400px;"></div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      banqianjiating: 578,
      banqiantotalnum: 2311,
      alljiuye: 1232,
      yijingjiuye: 320
    };
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = this.echarts.init(document.getElementById('main'));
    var option = {
      title: {
        text: '搬迁总人数信息',
        subtext: '总搬迁人数2311',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['高桥村', '茅坡村', '车道湾', '其他']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 178, name: '高桥村' },
            { value: 112, name: '茅坡' },
            { value: 115, name: '车道湾' },
            { value: 1906, name: '其他' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    myChart.setOption(option);

    // 就业信息图标
    var myChart1 = this.echarts.init(document.getElementById('main1'));
    var option1 = {
      title: {
        text: '就业相关信息',
        subtext: '总搬迁人数2311',
        x: 'center'
      },
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['已就业人数', '已有安排人员待就业人员数', '其他']
      },
      series: [
        {
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: [
            { value: 320, name: '已就业人数' },
            { value: 912, name: '已有安排人员待就业人员数' },
            { value: 1079, name: '其他' }
          ],
          itemStyle: {
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    myChart1.setOption(option1);
  }
};
</script>
<style lang="less" scoped>
.tubiao {
  width: 100%;
  height: 100%;
  #main,
  #main1 {
    margin: 20px auto;
  }
  .el-card {
    margin-top: 20px;
  }
  .title {
    text-align: center;
    font-size: 24px;
    margin: 20px 0;
  }
}
</style>